<template>
    <div v-if="!$store.state.user.pulling_info">
        <div class="ccover">
        <div class="top">
            <div class="row justify-content-md-center">
            <div class="col-8">
            <form @submit.prevent="logon">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input v-model="username" type="text" class="form-control" id="username" aria-describedby="请输入用户名">
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input v-model="password" type="password" class="form-control" id="password" aria-describedby="请输入密码">
                </div>
                <div class="mb-3">
                    <label for="confirmedPassword" class="form-label">确定密码</label>
                    <input v-model="confirmedPassword" type="password" class="form-control" id="confirmedPassword" aria-describedby="请输入密码">
                </div>
                <div class="error">{{ error_message }}</div>
                <button type="submit" class="btn btn-dark">注册</button>
            </form>
        </div>
        </div>
    </div>
    </div>
</div>
</template>

<script>

import router from "@/router";
import $ from "jquery";
import { ref } from "vue";

export default{

  setup(){
    let username = ref('');
    let phoneNumber = ref('');
    let password = ref('');
    let confirmedPassword = ref('');
    let error_message = ref('');
    const logon = ()=>{
        error_message.value='';
        $.ajax({
            url : 'http://127.0.0.1:3000/user/account/logon/',
            type:"post",
            data:{
                username:username.value,
                password:password.value,
                confirmedPassword:confirmedPassword.value,
            }, 
            success(resp){
                if(resp.error_message ==="success"){
                    router.push({name:"login"});
                }else{
                    error_message.value = resp.error_message;
                }
            }
        })
    }
   

    return {
        username,
        password,
        confirmedPassword,
        phoneNumber,
        error_message,
        logon,
    }


  }
}
</script>

<style scoped>
.el{
    text-align: center;
}
.el-select{
    width: 100%;
    margin-bottom: 5px;
}
.ccover{
    width: 100%;
    height: 91vh;
    float: left;
    background-image: url("../assets/img/R-C\ \(1\).jpg"); 
    background-size: cover; /* 图片会缩放以完全覆盖div，但可能会被裁剪 */  
    background-position: center; /* 图片居中显示 */  
    background-repeat: no-repeat; /* 图片不重复 */  
}

.over{
    height: 104vh;  
    width: 100vw; 
  }
  .col-8{
    margin-top: 5vh;
  }
.top{
    margin-bottom: 16vh;
    margin-top: 20vh;
    width: 30vw;
    height: 50vh;
    margin-left: 5vw;
    border-radius: 15%;
    background-color: rgba(255,255,255,70%);
}
button{
    width: 100%;
}
div.error{
    color: red;
}
</style>